<!-- 表格操作区域 -->
<template>
  <div class="container-tableAction">
    <div style="display: flex; align-items: center">
      <!-- 搜索 -->
      <el-button type="primary" @click="OpenAddUser">
        新增<el-icon class="el-icon--right">
          <Plus />
        </el-icon>
      </el-button>
      <!-- 重置 -->
      <el-button type="success" style="margin-left: auto" @click="RefreshData()" :loading="TableStore.tableloading">
        <el-icon class="el-icon--left" v-show="!TableStore.tableloading">
          <Refresh />
        </el-icon>
        刷新
      </el-button>
      <!-- 动态列 -->
      <el-popover placement="bottom" :width="400" trigger="click">
        <template #reference>
          <span class="el-dropdown-link" style="margin-left: 10px">
            列设置<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
        </template>
        <div>
          <el-checkbox v-for="list in lists" :key="list" :label="list.name" v-model="list.show" @change="handleChange">
            {{ list.columnName }}
          </el-checkbox>
        </div>
      </el-popover>
    </div>
    <!-- 新增用户框 -->
    <el-dialog v-model="dialogVisible" title="新增用户">
      <DynamicForms :form="form" :optionList="optionList" :rules="rules" @submit-click="handleSubmitClick"
        @reset-click="handleResetClick" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ColumnOption, RuleForm } from "@/typings/table";
import { User } from "@/typings/user";
import { ref, reactive } from "vue";
import { useTableStore } from "@/store/modules/table";
import { Refresh } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from 'element-plus'
import { AddUser } from '@/api/login'
import DynamicForms from "@/components/dialog/dialog-DynamicForms.vue"
import { GetTime } from '@/utils/TimeFormatter'

const dialogVisible = ref(false)

const form = {
  username: '',
  loginname: '',
  email: '',
  sex: 1,
  role: 1,
  status: 1,
  remark: '',
}


const optionList = [
  { label: "username", type: "Input", model: "username", defaultValue: form.username, selectItems: [] },
  { label: "loginname", type: "Input", model: "loginname", defaultValue: form.loginname, selectItems: [] },
  { label: "email", type: "Input", model: "email", defaultValue: form.email, selectItems: [] },
  { label: "sex", type: "Radio", model: "sex", defaultValue: form.sex, selectItems: [{ label: 1, value: "男" }, { label: 0, value: "女" }] },
  { label: "role", type: "Select", model: "role", defaultValue: form.role, selectItems: [{ value: 1, label: "管理员", }, { value: 2, label: "普通用户" }] },
  { label: "status", type: "Switch", model: "status", defaultValue: form.status, selectItems: [{ label: 1, value: "启用" }, { label: 0, value: "停用" }] },
  { label: "remark", type: "Input", model: "remark", defaultValue: form.remark, selectItems: [] },
]

const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 20, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  sex: [
    { required: true }
  ],
  role: [
    { required: true }
  ]
})

const handleSubmitClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      var user: User = {
        id: null,
        username: form.username,
        loginname: form.loginname,
        email: form.email,
        password: "123", //默认值
        status: form.status,
        sex: form.sex,
        time: GetTime("YYYY-MM-DD HH:mm:ss"),
        role: form.role,
        remark: form.remark
      };
      console.log(user)
      AddUser(user);
      dialogVisible.value = false;
    } else {
      console.log('error submit!', fields)
    }
  })
}

const handleResetClick = (formEl: FormInstance | undefined) => {
  console.log(formEl)
  if (!formEl) return
  formEl.resetFields()
}


// 定义事件  父类传递的事件
const emit = defineEmits([
  'refreshClick',
])

const TableStore = useTableStore();
const prop = defineProps<{
  option: any;
}>();

const lists = ref<ColumnOption[]>(prop.option);


//表头数据改变刷新
const handleChange = () => {
  TableStore.tableRender = !TableStore.tableRender;
};

//刷新数据
const RefreshData = () => {
  TableStore.tableloading = true;
  emit('refreshClick')
}

//新增用户
const OpenAddUser = () => {
  dialogVisible.value = true;
}

</script>
